<template>
	<view v-if="order_base.state">
		<!-- 用户信息 -->
		<view class="user-info-body">
			<view class="user-info">
				<image :src="state_icon[order_base.state - 1]" mode="scaleToFill" class="user-header-img"></image>
				<view class="user-nick-name" v-if="order_base.after_sales == 0">
					<view class="order-state-name">
						{{state_msg[order_base.state - 1].name}}
					</view>
					<view class="order-state-memo">{{state_msg[order_base.state - 1].msg}}</view>
				</view>
				<view class="user-nick-name" v-else>
					<view class="order-state-name">
						{{order_base.after_sales == 1?'售后中':'已售后'}}
					</view>
					<view class="order-state-memo">
						{{order_base.after_asles == 1 ? '亲,您的售后申请正在处理，请耐心等候':'欢迎下次继续光临本店！祝您生活愉快'}}
					</view>
				</view>
			</view>
		</view>
		<!--  收货信息 -->
		<view class="message">
			<view class="message_info">
				<view class="shr">
					收货人 : {{order_base.user_name}}
				</view>
				<view class="mobile">
					{{order_base.mobile}}
				</view>
			</view>
			<view class="message_area">
				收货地址: {{order_base.address}}
			</view>
			<image class="glpic" src="../../static/image/order/gl01-2.png" mode=""></image>
		</view>
		<!-- 订单菜单 -->
		<!-- 	<view class="order-addr">
			<view class="order-addr-icon">
				<image :src="addr_logo" mode="widthFix" class="addr-logo"></image>
			</view>
			<view class="order-addr-address">
				<view class="addr-info">{{order_base.address}}</view>
				<view class="add-user">
					<text>{{order_base.user_name}}</text>
					<text>{{order_base.mobile}}</text>
				</view>
			</view>
		</view> -->
		<!-- <view class="order-line"></view> -->
		<!-- 订单商品 -->
		<!-- :style="item.made_info.length == 2 ? 'background:rgba(253,242,242,1)' : ''" -->
		<view v-for="(item,key) in order_goods" class="order-goods-temp">
			<view class="ckgd">
				<goods-list :goods_list="setGoodsArr(item)" :is_same="item.is_same"></goods-list>
				<view class="see-more" @tap="seeMore(key)"><text>更多</text>
					<i class="icon" v-if="!item.show">&#xe70d;</i>
					<i class="icon" v-else>&#xe70c;</i>
				</view>
			</view>

			<!-- 定制信息 -->
			<view class="made-info" v-if="item.show">
				<!-- 标题 -->
				<view class="jt_t">

				</view>
				<view class="made-title">

					<view class="made-title-icon"></view>
					<view class="made-title-txt">定制信息</view>
					<!-- <view class="made-title-btn" @tap="refreshMade(item.goods_id,item.id)"><i class="icon">&#xe643;</i>更新设计</view> -->
				</view>
				<!-- 定制信息 -->
				<view class="made-info-made" v-if="item.is_same">
					<view class="made-item" v-for="made_item in item.made_info[0]">
						<view class="unit-info"><text>部件:</text>{{made_item.unit_name}}</view>
						<view class="material-info"><text>材质：</text>{{made_item.material_name}}</view>
						<view class="color-info"><text>颜色：</text>{{made_item.color_name}}</view>
					</view>
				</view>
				<view v-else>
					<view :class="keys == 0 ? 'made-info-made' : 'made-info-made made-right'"
						v-for="(items,keys) in item.made_info">
						<view class="made-area"><i class="icon">&#xe68e;</i>{{keys == 0 ? '左脚' : '右脚'}}</view>
						<view class="made-item" v-for="made_item in items">
							<view class="unit-info"><text>部件:</text>{{made_item.unit_name}}</view>
							<view class="material-info"><text>材质：</text>{{made_item.material_name}}</view>
							<view class="color-info"><text>颜色：</text>{{made_item.color_name}}</view>
						</view>
					</view>
				</view>
				<view class="made-info-made made-words" v-if="item.words_info.length">
					<view class="made-area">绣字信息</view>
					<template v-for="words_item in item.words_info" v-if="words_item.txt">
						<view class="made-item">
							<view class="unit-info"><text>区域:</text>{{words_item.name}}</view>
							<view class="material-info"><text>字体：</text>{{words_item.font}}</view>
							<view class="color-info"><text>文字：</text>{{words_item.txt}}</view>
						</view>
					</template>
				</view>
			</view>
		</view>
		<view class="fgxian" v-if="fgxian">

		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="order-info-item">
				<view class="order-info-label">订单编号</view>
				<view class="order-info-content">{{order_base.out_trade_no}}</view>
			</view>
			<view class="order-info-item">
				<view class="order-info-label">创建时间</view>
				<view class="order-info-content">{{order_base.create_time}}</view>
			</view>
			<view class="order-info-item" v-if="order_base.pay_time">
				<view class="order-info-label">支付时间</view>
				<view class="order-info-content">{{order_base.pay_time}}</view>
			</view>
			<view class="order-info-item" v-if="order_base.delivery_time">
				<view class="order-info-label">发货时间</view>
				<view class="order-info-content">{{order_base.delivery_time}}</view>
			</view>
			<view class="order-info-item" v-if="order_base.true_time">
				<view class="order-info-label">收货时间</view>
				<view class="order-info-content">{{order_base.true_time}}</view>
			</view>
			<view class="order-info-item">
				<view class="order-info-label">优惠金额</view>
				<view class="order-info-content">{{order_base.dis_price}}元</view>
			</view>
			<view class="order-info-item">
				<view class="order-info-label">商品总额</view>
				<view class="order-info-content">￥{{order_base.total_price}}</view>
			</view>
			<view class="order-info-item" v-if="order_base.state > 1">
				<view class="order-info-label">支付金额</view>
				<view class="order-info-content">￥{{order_base.real_price}}</view>
			</view>
			<view class="order-info-item">
				<view class="order-info-label">运费</view>
				<view class="order-info-content">免费</view>
			</view>
			<view class="order-info-item" v-if="order_base.delivery_name">
				<view class="order-info-label">快递公司</view>
				<view class="order-info-content">{{order_base.delivery_name}}</view>
			</view>
			<view class="order-info-item" v-if="order_base.delivery_num">
				<view class="order-info-label">快递单号</view>
				<view class="order-info-content">{{order_base.delivery_num}}</view>
			</view>
			<view class="order-info-item" v-if="order_base.state > 1">
				<view class="order-info-label">支付方式</view>
				<view class="order-info-content">{{order_base.pay_way == 1 ? '微信支付' : '后台标记'}}</view>
			</view>
			<view class="fgxian" v-if="order_base.after_sales > 0" style="margin-bottom: 30rpx;">

			</view>
			<view class="order-info-item" v-if="order_base.after_sales > 0">
				<view class="order-info-label">售后类型</view>
				<view class="order-info-content">{{after_info.type_name}}</view>
			</view>
			<view class="order-info-item" v-if="order_base.after_sales > 0">
				<view class="order-info-label">申请理由</view>
				<view class="order-info-content">{{after_info.memo}}</view>
			</view>
			<view class="order-info-item" v-if="order_base.after_sales > 0">
				<view class="order-info-label">申请时间</view>
				<view class="order-info-content">{{after_info.create_time}}</view>
			</view>
		</view>
		<view style="height: 210upx;"></view>
		<!-- 底部功能 -->
		<view class="bottom-menu">
			<view class="bottom-memo" v-if="order_base.state != 5">共{{order_goods.produceNum}}件商品
				{{order_base.state > 1 ? '已' : '待'}}支付：<text class="bottom-price">￥{{order_base.real_price}}</text>
			</view>
			<view class="bottom-btns-box">
				<view class="bottom-btn order-danger" @tap="delivery()"
					v-if="order_base.state > 2 && order_base.state != 5">{{order_base.state == 3 ? '物流跟踪' : '查看物流'}}
				</view>
				<view class="bottom-btn" v-if="order_base.state == 3" @tap="trueOrder()">确认收货</view>
				<view class="bottom-btn" v-if="order_base.is_after_sales==1" @tap="handleAfter()">申请售后</view>
				<view class="bottom-btn order-danger" v-if="order_base.state == 1" @tap="canlceOrder()">取消订单</view>
				<view class="bottom-btn" v-if="order_base.state == 1" @tap="toPay()">去支付</view>
				<view class="bottom-btn order-danger" v-if="order_base.state == 5" @tap="deleteOrder()">删除订单</view>
				<view class="bottom-btn" v-if="order_base.state == 4 && order_base.is_eval == 0" @tap="eval()">订单评价
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<!-- 弹窗 -->
		<view @tap.stop="">
			<alert @btn-click="btnClick" :dialog="dialog_show" :txt="dialog_txt" :icon="dialog_icon"></alert>
		</view>
		<view class="">
			<uni-popup ref="popup">
				<view class="popup_body">
					<view class="title">
						退货类型
					</view>
					<view class="radio_g">
						<radio-group @change="radioChange" class="radio_g_b">
							<label class="uni-list-cell uni-list-cell-pd" style="display: flex;margin-right: 30rpx;"
								v-for="(item, index) in after_type" :key="index">
								<view>
									<radio :value="item.name" :checked="item.checked" />
								</view>
								<view>{{item.name}}</view>
							</label>
						</radio-group>
					</view>
					
					<view class="i_body">

						<view class="mt-10px"
							style="min-width: 120rpx;font-size: 28rpx;text-align: justify;letter-spacing: 21rpx;">姓 名
						</view>
						<input type="text" v-model="username" placeholder="请输入姓名" class="input_body">

					</view>
					<view class="i_body">

						<view class="mt-10px min-w-75px" style="font-size: 28rpx;min-width: 120rpx;">联系方式</view>
						<input type="text" v-model="mobiel" placeholder="请输入联系方式" class="input_body">

					</view>
					<view class="i_body2">
					
						<view class="mt-10px min-w-75px" style="min-width: 120rpx;font-size: 28rpx;">申请理由</view>
						<textarea v-model="memo" placeholder="请输入申请理由"  class="input_body2"/>
					</view>
					<view style="width: 100%;display: flex;justify-content: center; margin-top: 40rpx;">
						<view class="btn_af" @tap="handleAfters">
							确认申请
						</view>
					</view>

				</view>

			</uni-popup>
		</view>
	</view>
</template>

<script>
	import goodsList from '../../components/order/goods-list.vue';
	import alert from '../../components/unit/alert.vue';

	export default {
		components: {
			goodsList,
			alert
		},
		data() {
			return {
				inputVal: '',
				memo: '',
				after_info: {},
				username: '',
				mobiel: '',
				radioVal: '',
				checked: false,
				state_icon: [
					require('../../static/image/order/fukuan.png'),
					require('../../static/image/order/fahuo.png'),
					require('../../static/image/order/shohuo.png'),
					require('../../static/image/order/yiwancheng.png'),
					require('../../static/image/order/quxiao.png'),
				],
				after_type: [],
				state_msg: [{
						name: '待付款',
						msg: '订单还没付款，我们将会在2小时后自动关闭'
					},
					{
						name: '待发货',
						msg: '亲，仓库正在努力配货中，请耐心等候'
					},
					{
						name: '待收货',
						msg: '亲，宝贝已经在配送中，请耐心等候取件通知'
					},
					{
						name: '已完成',
						msg: '亲，您的宝贵意见归我们很重要！感谢配合！'
					},
					{
						name: '已取消',
						msg: '欢迎下次继续光临本店！祝您生活愉快'
					}
				],
				// 分割线
				fgxian: true,
				order_id: 0,
				order_base: {
					state: 0
				},
				order_goods: [],
				addr_logo: require('../../static/image/order/addr-logo.png'),
				dialog_show: false,
				dialog_txt: '',
				dialog_icon: '',
				dialog_txt: '您是否确认要取消订单！',
				dialog_icon: 'https://jyduowei.oss-cn-qingdao.aliyuncs.com/order-canlce.png',
				dialog_style: 0
			}
		},
		onLoad(e) {
			this.order_id = e.order_id
			this.getData();
		},
		methods: {
			radioChange(v) {
				console.log(v.detail)
				this.radioVal = v.detail.value
			},
			//确认申请
			handleAfters() {

				this.ajax('order/applyAfter', {
					data: {

						order_id: this.order_id,
						type_name: this.radioVal,
						memo: this.memo,
						name: this.username,
						mobile: this.mobiel,

					},
					success: (res) => {
						console.log(res)
						if (res.code == 1) {
							this.getData()
							this.$refs.popup.close()
						}
						this.toast(res.msg);
					}
				})
			},
			//获取订单详情
			getData() {
				this.ajax('order/orderDetail', {
					data: {
						order_id: this.order_id
					},
					success: (res) => {
						console.log(res)
						this.order_goods = res.msg.order_goods;
						this.after_type = res.msg.after_type
						for (let i in this.after_type) {
							this.after_type[i].checked = false
						}
						this.after_info = res.msg.after_info
						var produceNum = 0;
						this.order_goods.forEach(function(item) {
							produceNum += item.goods_num
							console.log(item)
						})
						res.msg.order_goods.produceNum = produceNum
						console.log(this.order_goods)
						setTimeout(() => {
							this.order_base = res.msg.order_base;
						}, 200)

					}
				});
			},
			//申请售后
			handleAfter() {
				this.$refs.popup.open()
			},
			//设置商品数组
			setGoodsArr(data) {
				var list = [];
				for (var i in data.made_info) {
					list.push(data);
				}
				return list;
			},
			delivery() {
				uni.navigateTo({
					url: '/pages/order/delivery?order_id=' + this.order_id
				})
			},
			//查看更多
			seeMore(key) {
				this.fgxian = !this.fgxian;
				this.order_goods[key].show = this.order_goods[key].show ? false : true;
				this.$forceUpdate()
			},
			//去评价
			eval() {
				uni.navigateTo({
					url: '/pages/order/eval?order_id=' + this.order_id
				})
			},
			//确认收货
			trueOrder() {
				this.ajax('order/trueOrder', {
					data: {
						id: this.order_id
					},
					success: (res) => {
						this.toast(res.msg);
						if (res.code) {
							setTimeout(() => {
								this.getData();
							}, 1000)
						}
					}
				});
			},
			// 去支付
			toPay(id, real_price) {
				uni.navigateTo({
					url: '/pages/order/pay?order_id=' + this.order_id + '&order_price=' + this.order_base
						.total_price
				})
			},
			//取消订单
			canlceOrder() {
				this.dialog_txt = '您是否确认要取消订单！';
				this.dialog_show = true;
				this.dialog_style = 0;
			},
			//删除订单
			deleteOrder(id) {
				this.dialog_txt = '您是否确认要删除订单！';
				this.dialog_show = true;
				this.dialog_style = 1;
			},
			//模态框按钮事件
			btnClick(e) {
				this.dialog_show = false;
				if (e == 0) return false;
				var url = '';
				switch (this.dialog_style) {
					case 0:
						url = 'order/canlceOrder';
						break;
					case 1:
						url = 'order/deleteOrder';
						break;
				}
				this.ajax(url, {
					data: {
						id: this.order_id
					},
					success: (res) => {
						if (res.code) {
							if (this.dialog_style == 1) {
								setTimeout(() => {
									uni.navigateBack();
								}, 1000)
							} else {
								this.getData();
							}

						}
						this.toast(res.msg);
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	@import url("../../static/css/order/detail.css");

	.popup_body {
		background-color: white;
		display: flex;
		padding: 10rpx;
		flex-direction: column;
		border-radius: 20rpx;
		padding: 40rpx;

		.title {
			font-size: 32rpx;
			line-height: 38rpx;
		}

		.radio_g {
			margin-top: 30rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			.radio_g_b {
				display: flex;
				margin-top: 20rpx;
			}
		}

		.i_body {
			margin-top: 20px;
			display: flex;
			align-items: center;

			.input_body {
				margin-left: 8rpx;
				width: 406rpx;
				height: 70rpx;
				border-radius: 20rpx;
				border: 2rpx solid #E2E2E2;
				padding-left: 30rpx;
			}
		}
		.i_body2 {
			margin-top: 20px;
			display: flex;
			align-items: flex-start;
			.input_body2 {
				margin-left: 8rpx;
				width: 406rpx;
				height: 200rpx;
				border-radius: 20rpx;
				border: 2rpx solid #E2E2E2;
				padding-left: 30rpx;
				padding-top: 20rpx;
			}
		}
		.btn_af {
			width: 240rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: black;
			color: white;
			border-radius: 20rpx;
		}
	}
</style>